<template>
	<view class="containar">
		<!-- <cu-custom bgColor="none" :isBack="false">
				<block slot="content"><span style="color: #333;font-weight: 400;">获取用户头像昵称</span></block>
			</cu-custom> -->
		<uv-toast ref="toast"></uv-toast>
		<view class="avatarUrl">
			<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
				<image :src="avatarUrl" class="refreshIcon"></image>
			</button>
		</view>
		<view class="userName">
			<text>昵称：</text>
			<input :clearable="false" type="nickname" class="weui-input" :value="data.nickName" @blur="bindblur"
				placeholder="请输入昵称" @input="bindinput" />
		</view>

		<view style="width: 100%;height: 1px; background: #EEE;">

		</view>
		<view style="width: 700rpx; height: 20px; font-size: 13px; margin: auto; margin-top: 40rpx;">
			· 申请获取以下权限
		</view>
		<view style="width: 700rpx; height: 20px; font-size: 13px; margin: auto; color: #cbcbcb; margin-top: 25rpx;">
			· 获得你的信息(昵称、头像等)
		</view>

		<view class="btn">
			<uv-button @click="onSubmit" type="primary">保存</uv-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const toast = ref(null);
	import api from './api'
	import {
		useUserStore
	} from '@/stores/user'
	const userStore = useUserStore()
	const fileUpload = api.FileUpload
	const avatarUrl = ref(
		"https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
		)
	const data = ref({
		nickName: "微信用户",
		avatar: '',
		code: ''
	})
	const avatar = ref('')
	const bindblur = (e) => {
		console.log(e);
		data.value.nickName = e.detail.value
	}
	const bindinput = (e) => {
		data.value.nickName = e.detail.value
		console.log(e);
	}

	const onChooseavatar = (e) => {
		avatarUrl.value = e.detail.avatarUrl
		api.upload(avatarUrl.value).then(res => {
			if (res.successed) {
				data.value.avatar = res.data.id
			}
		})
	}

	const onSubmit = () => {
		if (data.value.avatar == '') {
			toast.value.show({
				message: '请上传头像！',
				type: 'error',
				duration: 1200,
				position: 'top'
			});
			return
		}
		getUserProfile()
	}
	const getUserCode = () => {
		uni.login({
			provider: "weixin",
			success: (res) => {
				data.value.code = res.code
				registerAndLoginByWeChat()
			}
		})
	}

	const registerAndLoginByWeChat = () => {
		api.registerAndLoginByWeChat(data.value).then(res => {
			if (res.successed) {
				userStore.token = res.token
				uni.navigateBack({
					delta: 2
				});
			}
		})
	}
	const getUserProfile = () => {
		uni.getUserProfile({
			desc: "获取你的昵称、头像",
			success: (res) => {
				console.log(res);
				if (res.errMsg == "getUserProfile:ok" && res.userInfo != undefined) {
					getUserCode()
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.containar {
		width: 100vw;
		height: 100vh;
		background: #fff;
		box-sizing: border-box;
		padding: 0 30rpx;

		.avatarUrl {
			padding: 80rpx 0 40rpx;
			background: #fff;

			button {
				background: #fff;
				line-height: 80rpx;
				height: auto;
				border: none !important;
				width: auto;
				// padding: 20rpx 30rpx;
				margin: 0;
				display: flex;
				border: none;
				justify-content: center;
				align-items: center;

				&::after {
					border: none;
				}

				.refreshIcon {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					background-color: #ccc;
				}

				.jt {
					width: 14rpx;
					height: 28rpx;
				}
			}
		}

		.userName {
			background: #fff;
			padding: 20rpx 30rpx 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.weui-input {
				padding-left: 60rpx;
			}
		}

		.btn {
			margin-top: 30rpx;
		}
	}
</style>